<template>
	<div id="app">
    <form @submit.prevent="setMessage">
      <div>
        <label for="name">类型水果名称：</label>
        <input type="text" id="name" v-model="message.name">
      </div>
      <div>
        <label for="dj">水果单价：</label>
        <input type="text" id="dj" v-model="message.dj">
      </div>
      <button>添加</button>
    </form>
    <table>
      <thead>
        <tr>
          <th>类型</th>
          <th>单价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value,index) of array" :key="index">
          <td>{{value.name}}</td>
          <td>{{value.dj}}</td>
          <td><button v-if="value.isshow" @click="delMessage(index)">删除</button></td>
        </tr>
      </tbody>
    </table>
	</div>
</template>

<script>
// import MyButtom from "./components/MyButton";
export default {
  // components:{
  //   MyButtom
  // },
  data(){
    return{
      message:{
        name:"",
        dj:"",
        isshow:"",
      },
      array:[{
        name:"",
        dj:"",
        isshow:"",
      }],
    }
  },
  methods:{
    setMessage(){
      let mess={
        name:this.message.name,
        dj:this.message.dj,
        isshow:true
      };
      this.array.push(mess);
    },
    delMessage(index){
      this.array.splice(index,1);
    }
  }
};
</script>
<style>
</style>